<template>
  <view class="query-plan-container">
    <view class="query-title">查询我的旅游计划</view>
    <button class="query-button" @tap="fetchTravelPlans">查询我的旅游计划</button>
    <view v-if="travelPlans.length > 0" class="plan-list">
      <view v-for="(plan, index) in travelPlans" :key="index" class="plan-item" @tap="goToItinerary(plan)">
        <view class="plan-name">{{ plan.name }}</view>
        <view class="plan-desc">出发地: {{ plan.departure_city }}，目的地: {{ plan.destination_city }}</view>
        <view class="plan-desc">旅行天数: {{ plan.duration_days }} 天</view>
      </view>
    </view>
    <view v-else class="no-plan-prompt">
      暂无旅游计划
    </view>
  </view>
</template>

<script>
//import request from '@/utils/request';

export default {
  data() {
    return {
      travelPlans: [],
    };
  },
  methods: {
    async fetchTravelPlans() {
      try {
        const res = await request({
          url: 'https://api.xiaoyaoyou.hanfenga7.cn/api/v1/iterary/travelplan/uid/1',
          method: 'GET'
        });
        this.travelPlans = res.data;
      } catch (error) {
        console.error('获取旅游计划失败：', error);
      }
    },
    goToItinerary(plan) {
      // 对计划数据进行处理，提取行程页面需要的数据
      const itineraryData = {
        title: plan.name,
        days: plan.duration_days,
        daysDetails: plan.daily_itineraries.map(day => ({
          events: day.daily_itineraries.map(event => ({
            startTime: '', // 这里未找到对应数据，可根据实际情况补充
            endTime: '', // 这里未找到对应数据，可根据实际情况补充
            duration: 0, // 这里未找到对应数据，可根据实际情况补充
            eventName: event.morning_activity + (event.afternoon_activity? `，${event.afternoon_activity}` : '') + (event.evening_activity? `，${event.evening_activity}` : ''),
            destination: '', // 这里未找到对应数据，可根据实际情况补充
            food: '', // 这里未找到对应数据，可根据实际情况补充
            cost: 0, // 这里未找到对应数据，可根据实际情况补充
            isCheckable: true
          }))
        })),
        suggestion: plan.suggestion
      };
      uni.navigateTo({
        url: `/pages/itinerary/itinerary?itineraryData=${JSON.stringify(itineraryData)}`
      });
    }
  },
  onLoad() {
    this.fetchTravelPlans();
  }
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

.query-plan-container {
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background-color: #f9fafb;
  min-height: 100vh;
}

.query-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1.5rem;
  text-align: center;
}

.query-button {
  display: block;
  width: 12rem;
  padding: 0.75rem 1rem;
  margin: 0 auto 1.5rem;
  background-color: #3b82f6;
  color: #ffffff;
  text-align: center;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: none;
  font-size: 1rem;
  font-weight: 500;
}

.query-button:hover {
  background-color: #2563eb;
}

.plan-list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.plan-item {
  padding: 1.25rem;
  background-color: #ffffff;
  border: none;
  border-radius: 0.75rem;
  margin-bottom: 0;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease;
}

.plan-item:hover {
  transform: translateY(-0.25rem);
}

.plan-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.plan-desc {
  color: #6b7280;
  font-size: 0.875rem;
}

.no-plan-prompt {
  margin-top: 1.5rem;
  color: #9ca3af;
  text-align: center;
  font-size: 0.875rem;
}
</style>    